<template>
  <div class="card breadcrumb-container">
    <div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
      <CollapseIcon />
      <el-breadcrumb :separator-icon="ArrowRight">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
            <div class="el-breadcrumb__inner is-link" :class="{ 'item-no-icon': !item.meta.icon }"
              @click="onBreadcrumbClick(item, index)">
              <el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
                <component :is="item.meta.icon"></component>
              </el-icon>
              <span class="breadcrumb-title">{{ item.meta.title }}</span>
            </div>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { AuthStore } from "@/stores/modules/auth";
import { GlobalStore } from "@/stores";
import { appendParamsToPath } from "@/utils/util";
import CollapseIcon from '../../Header/components/CollapseIcon.vue'

const route = useRoute();
const router = useRouter();
const authStore = AuthStore();
const globalStore = GlobalStore();

const breadcrumbList = computed(() => {
  let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
  return breadcrumbData;
});

// Click Breadcrumb
const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
  if (index !== breadcrumbList.value.length - 1) {
    router.push(appendParamsToPath(route.query, item.path))
  };
};
</script>

<style scoped lang="scss">
.breadcrumb-container {
  border-left: none;
  overflow: visible;
}

.breadcrumb-box {
  display: flex;
  align-items: center;
  overflow: hidden;

  .el-breadcrumb {
    white-space: nowrap;

    .el-breadcrumb__item {
      position: relative;
      display: inline-block;
      float: none;

      .item-no-icon {
        transform: translateY(-3px);
      }

      .el-breadcrumb__inner {
        display: inline-flex;

        &.is-link {
          color: var(--el-header-text-color);

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .breadcrumb-icon {
          margin-top: 1px;
          margin-right: 6px;
          font-size: 16px;
        }

        .breadcrumb-title {
          margin-top: 2px;
        }
      }

      &:last-child .el-breadcrumb__inner,
      &:last-child .el-breadcrumb__inner:hover {
        color: var(--el-header-text-color-regular);
      }

      :deep(.el-breadcrumb__separator) {
        transform: translateY(-1px);
      }
    }
  }
}

.no-icon {
  .el-breadcrumb {
    .el-breadcrumb__item {
      top: -2px;

      :deep(.el-breadcrumb__separator) {
        top: 4px;
      }

      .item-no-icon {
        transform: translateY(0);
      }
    }
  }
}
</style>
